<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选项卡</title>
    <link rel="stylesheet" href="css/1.css">
    <script src="js/1.js"></script>
<!--<style>-->
     <!--.btn{-->
     <!--background: red;-->
      <!--color: #fff;-->
       <!--}-->
   <!--.box div{-->
       <!--width: 100px;-->
       <!--height: 100px;-->
       <!--border: solid 1px #000;-->
       <!--display: none;-->
        <!--}-->
<!--</style>-->
</head>

<body>
 <!-- 选项卡 -->
 <div id="box" class="box">
   <input type="button" value="选项卡1" class="btn">
   <input type="button" value="选项卡2">
    <input type="button" value="选项卡3">
     <div style="display:block;">1111</div>
     <div>2222</div>
    <div>3333</div>
  </div>

 <div id="box2" class="box">
<input type="button" value="选项卡1" class="btn">
   <input type="button" value="选项卡2">
  <input type="button" value="选项卡3">
 <div style="display:block;">1111</div>
  <div>2222</div>
   <div>3333</div>
 </div>


<!--<script type="text/javascript">-->
 <!--//选项卡-->
  <!--class Tab{  //类-->
     <!--constructor(id){  //constructor在new出来一个实例时就自动执行-->
      <!--this.oBox=document.getElementById(id);-->
      <!--this.aBtn=this.oBox.getElementsByTagName('input');-->
       <!--this.aDiv=this.oBox.getElementsByTagName('div');-->
      <!--this.iNow=0;-->
       <!--this.init();-->
      <!--}-->
  <!--init(){    //为对象添加方法-->
       <!--for (let i = 0; i < this.aBtn.length; i++) {-->
         <!--this.aBtn[i].onclick=function(){-->
          <!--this.hide();    //先循环让所有的都隐藏-->
          <!--this.show(i);    //再让选择的第i个显示出来-->
          <!--}.bind(this);    //bind(this)进行校正this的值-->
       <!--}-->
      <!--}-->
   <!--hide(){-->
     <!--for (let i = 0; i < this.aBtn.length; i++) {-->
       <!--this.aBtn[i].className='';-->
        <!--this.aDiv[i].style.display='none';-->
      <!--}-->
     <!--}-->
   <!--show(index){-->
       <!--this.aBtn[index].className='btn';-->
       <!--this.aDiv[index].style.display='block';-->
     <!--}-->
     <!--}-->


  <!--class AutoTab extends Tab{-->
    <!--constructor(id){-->
      <!--super(id);  //继承，防止覆盖-->
       <!--setInterval(this.next.bind(this),1000);-->
     <!--}-->
     <!--next(){-->
     <!--this.iNow++;-->
       <!--if (this.iNow==this.aBtn.length) {-->
         <!--this.iNow=0;-->
       <!--}-->
     <!--this.hide();-->
       <!--this.show(this.iNow);-->
       <!--}-->
     <!--}-->

  <!--window.onload=function(){-->
      <!--var tb=new Tab('box');-->
      <!--var Atotb=new AutoTab('box2');-->
    <!--};-->
  <!--</script>-->
</body>
</html>